<style>
    .amap-sug-result {
        z-index: 9999;
    }
    .amap-maptypecontrol {
        top: 500px;
    }

    .devices {
        position: fixed;
        right: -660px;
        top: 60px;
        z-index: 100;
        width: 660px;
        transition: right 0.5s;
    }

    .devices.active {
        right: -1px;
    }

    .btn-device {
        background-color: rgba(0, 0, 0, 0.6) !important;
        padding: 10px 15px;
        border-color: #dee5e7 !important;
        position: absolute;
        top: 0;
        left: -45px;
        border-width: 0;
        border-radius: 2px;
    }

    .wrapper-md {
        padding: 0 !important;
    }

    .device-hide {
        display: none;
    }

    .amap-maptypecontrol {
        top: 610px;
    }

    .amap-info-content {
        padding: 0;
    }

    .amap-info-close {
        color: white;
        margin-top: 2px;
    }

    .infowindow-title {
        padding: 5px 8px;
        color: white;
    }

    .online {
        background-color: rgb(39, 194, 76);
    }

    .offline {
        background-color: rgb(35, 183, 299);
    }

    .fault {
        background-color: rgb(255, 69, 100);
    }

    .word-break {
        word-wrap: break-word;
        word-break: break-all;
    }

    .btn-monitor {
        font-size: 12px;
        border-radius: 2px;
        line-height: 1.5;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .btn-disabled {
        cursor: not-allowed !important;
    }
</style>
<div class="modal-header">
    <button type="button" class="close" ng-click="vm.cancel()">&times;</button>
    <h5 class="modal-title" translate="common.location"></h5>
</div>

<div class="modal-body" style="height: 500px;">
    <div style="height:500px;" ui-map="myMap"
         ui-options="vm.mapOptions"
         ui-event="{'map-click': 'vm.mapClick($event, $params)',
				'map-complete': 'vm.addAutocomplete($event, $params)'  }"></div>
    <div>
        <!-- <div ng-repeat="marker in vm.myMarkers" ui-map-marker="marker"
              ui-event="{'map-click':'vm.markerClick(marker)',
         'map-mouseover':'vm.cityMouseover(marker,1)',
         'map-mouseout':'vm.cityMouseover(marker,2)',
         'map-dragstart':'vm.closeInfoWindow()',
         'map-dragend':'vm.markerDragendFun()'}">
         </div>-->
        <input type="text" class="b-a" ng-if="vm.flag === 'single'" readonly ng-model="vm.selectLngLat"
               placeholder="{{'maps.lnglat' | translate}}"
               style="position: absolute; top:15px;left: 80px; z-index: 1;">
        <div class="input-group r b-a bg-white" style="position: absolute; top:15px; right:35px; z-index: 1;">
            <input type="text" id="input_id" placeholder="{{'maps.search' | translate}}"
                   style="border: 1px solid white;"/>
            <span><i class="fa fa-search" style="padding: 3px;"></i></span>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="vm.cancel()" translate="common.cancel"></button>
    <button type="button" class="btn btn-primary" ng-click="vm.save()" translate="common.confirm"></button>
</div>
<!--弹出框-->
<div id="popup_info" ui-map-info-window="vm.deviceInfoWindow" style="width: 260px">
    <div class="panel panel-default" style="margin-bottom: 5px">
        <div class="list-group no-radius alt">
            <li class="list-group-item" href>
				<span class="badge">
					<input type="text" ng-model="vm.marker.taskName" 
                           style="width: 100px;color: #0b1014" id="ipt" required ></input>
                </span>
                <i class="fa fa-map-marker fa-fw text-muted"></i>
                {{'patrol.address' | translate }}
            </li>
            <a class="list-group-item" href>
                <span class="badge bg-info">{{vm.marker.lng}}</span>
                <i class="fa fa-location-arrow fa-fw text-muted"></i>
                {{'area.longitude' | translate }}
            </a>
            <a class="list-group-item" href>
                <span class="badge bg-primary">{{vm.marker.lat}}</span>
                <i class="fa fa-location-arrow fa-fw text-muted"></i>
                {{'area.latitude' | translate }}
            </a>
        </div>
    </div>
    <div class='bottom' style='padding: 5px 8px;'>
        <button
                class="btn btn-monitor fault"
                ng-click='vm.deleteMarker(vm.marker)' style="margin-left: 10px;border-radius: 25px;">
            <span style='color: white;' translate="maps.deleteMarker"></span>
        </button>
        <button
                class="btn btn-monitor online" ng-disabled="!vm.marker.taskName"
                ng-click='vm.saveMarker(vm.marker)' style="margin-left: 90px;border-radius: 25px;">
            <span style='color: white;' translate="dialogs.DIALOGS_YES"></span>
        </button>

    </div>
</div>
